<template>
	<view class="container">
		<u-toast ref="uToast"></u-toast>
		<view class="bg"></view>
		<view class="cover">
			<view class="gaussian">
				<u--image radius="10" :src="cover.image.file_path" width="100%" height="940rpx"></u--image>
				<view class="popup"></view>
			</view>
			<view class="content">
				<view class="image">
					<u--image :src="cover.image.file_path" width="100%" height="480rpx"></u--image>
				</view>
				<view class="title">{{ cover.name }}</view>
				<!-- <view class="rule" v-if="cover.gift_text">赠送说明：{{ cover.gift_text }}</view> -->
				<view class="rule">规则：{{ cover.rule_text }}</view>
				<view class="date" v-if="cover.type == 20">{{ cover.start_time }}</view>
				<view @click="onExchange" class="btn" v-if="cover.type == 10" style="margin-top: 30rpx;">
					<u-button
						icon="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63889c845a7e3f0310de5223/6398219cd109e60012196b2c/16709144995558092144.png"
						color="#fa3534" shape="circle" :text="cover.coin+' 领取'"></u-button>
				</view>
				<view class="btn" v-if="cover.type == 20">
					<block v-if="cover.is_start == 10">
						<u-button @click="onSubscribe" color="#fa3534" shape="circle" text="立即预约"></u-button>
					</block>
					<block v-if="cover.is_start == 20">
						<u-button @click="onExchange" color="#fa3534" shape="circle" text="立即领取"></u-button>
					</block>
					<block v-if="cover.is_start == 30">
						<u-button :disabled="true" color="#fa3534" shape="circle" text="活动已结束"></u-button>
					</block>
				</view>
				<view class="btn" v-if="cover.type == 30" style="margin-top: 30rpx;">
					<u-button @click="onExchange" color="#fa3534" shape="circle" text="免费领取"></u-button>
				</view>
			</view>
		</view>
		<!-- 操作按钮 -->
		<view class="action">
			<u-grid :border="false" :col="store.is_group_qrcode == 10?4:3">
				<u-grid-item>
					<button open-type="share" class="u-reset-button">
						<u-icon
							name="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63889c845a7e3f0310de5223/6398219cd109e60012196b2c/16712676936247951990.png"
							:size="28"></u-icon>
						<text class="grid-text">分享朋友圈</text>
					</button>
				</u-grid-item>
				<u-grid-item @click="onPreviewQrcode" v-if="store.is_group_qrcode == 10">
					<u-icon
						name="https://img.alicdn.com/imgextra/i4/2064565174/O1CN014z2vFD1o5k37Z8mms_!!2064565174.png"
						:size="28"></u-icon>
					<text class="grid-text">进群分享</text>
				</u-grid-item>
				<u-grid-item @click="onSetCoverUrl">
					<u-icon
						name="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63889c845a7e3f0310de5223/6398219cd109e60012196b2c/16712676936256896190.png"
						:size="28"></u-icon>
					<text class="grid-text">复制链接</text>
				</u-grid-item>
				<u-grid-item>
					<button open-type="share" class="u-reset-button">
						<u-icon
							name="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63889c845a7e3f0310de5223/6398219cd109e60012196b2c/16712676936239085097.png"
							:size="28"></u-icon>
						<text class="grid-text">分享好友</text>
					</button>
				</u-grid-item>
			</u-grid>
		</view>
		<!-- 订阅通知 -->
		<view class="subscribe" @click="onSubscribe" v-if="cover.type == 20 && cover.is_start == 10">
			<view class="left">
				<view class="icon">
					<u-icon
						name="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63889c845a7e3f0310de5223/6398219cd109e60012196b2c/16712676936220749801.png">
					</u-icon>
				</view>
				<view class="text">订阅通知</view>
			</view>
			<view class="right">
				<view class="text">
					<view>领取时间：</view>
					<u-count-down autoStart millisecond :time="cover.down_time" format="HH 时 mm 分 ss 秒"></u-count-down>
				</view>
			</view>
		</view>
		<!-- 底部流量主 -->
		<view class="ad" v-if="spool.video.status == 10">
			<ad :unit-id="spool.video.id" ad-type="video" ad-theme="white"></ad>
		</view>
	</view>
</template>

<script>
	import {
		detail,
		receive,
		subscribe,
		SetCoverUrl
	} from '@/api/cover.js';
	import {
		detail as user
	} from '@/api/user.js';
	import {
		config
	} from '@/api/system.js';
	export default {
		data() {
			return {
				spool: {},
				userInfo: {},
				cover: [],
				store: {}
			};
		},
		onLoad(options) {
			this.cover_id = options.cover_id
			this.getCover()
			this.getStore()
			this.getSpool()
		},
		onShow() {
			this.getUser()
		},
		onShareTimeline() {
			let _this = this
			return {
				imageUrl: _this.cover.image.file_path,
				title: "@" + _this.cover.name
			}
		},
		onShareAppMessage() {
			let _this = this
			return {
				imageUrl: _this.cover.image.file_path,
				title: "@" + _this.cover.name,
				path: '/pages/cover/detail/index?cover_id=' + _this.cover.cover_id + '&user_id=' + _this.userInfo.user_id
			}
		},
		methods: {
			onPreviewQrcode() {
				let _this = this;
				uni.previewImage({
					urls: [_this.store.group_qrcode]
				})
			},
			onSetCoverUrl() {
				let _this = this;
				SetCoverUrl({
					cover_id: _this.cover.cover_id
				}).then(res => {
					uni.setClipboardData({
						data: res.data.copy_url
					})
				}).catch(err => {

				})
			},
			getSpool() {
				let _this = this;
				config({
					key: 'spool'
				}).then(res => {
					_this.spool = res.data.config
					if (_this.spool.insert.status == 10) {
						insert.load(_this.spool.insert.id)
						insert.show()
					}
				}).catch(err => {

				})
			},
			onSubscribe() {
				let _this = this
				wx.requestSubscribeMessage({
					tmplIds: [_this.store.tpl_msg],
					success(res) {
						if (res[_this.store.tpl_msg] == 'accept') {
							subscribe({
								cover_id: _this.cover.cover_id
							}).then(res => {
								if (res.code == 1) {
									_this.$refs.uToast.show({
										message: "订阅成功~！",
										complete() {}
									})
								}
							}).catch(err => {

							})
						}
					}
				})
			},
			getStore() {
				config({
					key: 'store'
				}).then(res => {
					this.store = res.data.config
				}).catch(err => {

				})
			},
			getUser() {
				user({}).then(res => {
					this.userInfo = res.data.userInfo
				}).catch(err => {

				})
			},
			onExchange() {
				receive({
					cover_id: this.cover_id
				}).then(res => {
					if (res.code == 1) {
						//#ifdef MP-WEIXIN
						// wx.showRedPackage({
						// 	url: res.data.cover_url
						// })
						//#endif
						uni.navigateTo({
							url: '/pages/cover/receive/index?urls=' + encodeURIComponent(res.data
								.cover_url)
						})
					}
				}).catch(err => {

				})
			},

			getCover() {
				detail({
					cover_id: this.cover_id
				}).then(res => {
					this.cover = res.data.cover
					uni.setNavigationBarTitle({
						title: this.cover.name
					})
				}).catch(err => {

				})
			}
		}
	}
</script>

<style lang="scss">
	.ad {
		margin-top: 30rpx;
	}

	.subscribe {
		width: 92%;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 30rpx;
		background-color: #fff;
		border-radius: 15rpx;
		overflow: hidden;

		.left {
			width: 25%;
			display: flex;
			flex-direction: row;
			align-items: center;
			background-color: #F22E38;
			color: #fff;
			padding: 30rpx 30rpx;
		}

		.right {
			width: 75%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;

			.text {
				display: flex;
				flex-direction: row;
				align-items: center;

				.num {
					color: #F22E38;
					margin-right: 10rpx;
				}
			}
		}
	}

	page {
		height: 100%;

		.container {
			height: 100%;
			padding-bottom: 120rpx;
		}
	}

	.action {
		width: 92%;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 15rpx;
		padding: 30rpx 0rpx;

		.u-reset-button {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.grid-text {
			margin-top: 15rpx;
			font-size: 24rpx;
		}
	}

	.cover {
		width: 80%;
		margin: 0 auto;
		border-radius: 15rpx;
		overflow: hidden;
		position: relative;
		margin-bottom: 30rpx;

		.content {
			position: absolute;
			width: 60%;
			top: 0rpx;
			left: 20%;
			display: flex;
			flex-direction: column;
			align-items: center;
			z-index: 999;

			.title {
				font-size: 38rpx;
				font-weight: bolder;
				color: #fff;
			}

			.btn {
				.u-button {
					width: 240rpx;
					height: 80rpx;
				}
			}

			.rule {
				margin-top: 30rpx;
				color: #fff;
			}

			.date {
				margin: 30rpx 0rpx;
				color: #fff;
			}

			.image {
				width: 80%;
				border-radius: 15rpx;
				overflow: hidden;
				margin: 15rpx 0rpx;
				margin-top: 60rpx;
			}
		}

		.gaussian::after {
			border-radius: 10rpx !important;
			overflow: hidden !important;
		}

		.gaussian {
			position: relative;
			min-height: 100%;
			z-index: 990;
			backdrop-filter: blur(15rpx);
			filter: blur(15rpx);
			background: rgba(255, 255, 255, .3);
			border-radius: 10rpx !important;
			overflow: hidden !important;

			.popup::after {
				border-radius: 10rpx !important;
				overflow: hidden !important;
			}

			.popup {
				position: absolute;
				top: 0rpx;
				left: 0rpx;
				width: 100%;
				min-height: 100%;
				border-radius: 10rpx !important;
				overflow: hidden !important;
				// backdrop-filter: blur(10rpx);
				// filter: blur(30rpx);
			}
		}
	}

	.bg {
		width: 100%;
		height: 120rpx;
		background-color: #F22E38;
		position: absolute;
		top: -0rpx;
		left: 0rpx;
		border-radius: 0 0 100rpx 100rpx;
		/* 左上、右上、右下、左下 */
	}
</style>
